<!-- <template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left">
        <div class="logo">
          <i class="icon-logo"></i>
          <span class="logo-text">农民技能提升就业培训大数据平台</span>
        </div>
        <button class="menu-toggle" @click="toggleSidebar">
          <i class="icon-menu"></i>
        </button>
      </div>
      
      <div class="header-right">
        <div class="header-actions">
          <div class="search-box">
            <input type="text" placeholder="搜索..." />
            <i class="icon-search"></i>
          </div>
          
          <div class="notification" @click="showNotifications">
            <i class="icon-bell"></i>
            <span class="badge" v-if="notificationCount > 0">{{ notificationCount }}</span>
          </div>
          
          <div class="user-menu" @click="toggleUserMenu">
            <img src="https://via.placeholder.com/40x40/4F46E5/ffffff?text=A" alt="用户头像" class="avatar" />
            <span class="username">管理员</span>
            <i class="icon-chevron-down"></i>
            
            <div class="dropdown-menu" v-show="showUserDropdown">
              <a href="#" class="dropdown-item">
                <i class="icon-user"></i>个人资料
              </a>
              <a href="#" class="dropdown-item">
                <i class="icon-settings"></i>设置
              </a>
              <hr class="dropdown-divider" />
              <a href="#" class="dropdown-item logout">
                <i class="icon-logout"></i>退出登录
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 侧边导航栏 -->
      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <nav class="sidebar-nav">
          <div class="nav-section">
            <div class="nav-title">主要功能</div>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: activeMenu === 'dashboard' }">
                <a href="#" class="nav-link" @click="setActiveMenu('dashboard')">
                  <i class="icon-dashboard"></i>
                  <span class="nav-text">仪表盘</span>
                </a>
              </li>
              <li class="nav-item" :class="{ active: activeMenu === 'students' }">
                <a href="#" class="nav-link" @click="setActiveMenu('students')">
                  <i class="icon-users"></i>
                  <span class="nav-text">学员管理</span>
                </a>
              </li>
              <li class="nav-item" :class="{ active: activeMenu === 'teachers' }">
                <a href="#" class="nav-link" @click="setActiveMenu('teachers')">
                  <i class="icon-package"></i>
                  <span class="nav-text">教师管理</span>
                </a>
              </li>
              <li class="nav-item" :class="{ active: activeMenu === 'courses' }">
                <a href="#" class="nav-link" @click="setActiveMenu('courses')">
                  <i class="icon-shopping-cart"></i>
                  <span class="nav-text">课程管理</span>
                </a>
              </li>
            </ul>
          </div>

          <div class="nav-section">
            <div class="nav-title">系统管理</div>
            <ul class="nav-list">
              <li class="nav-item" :class="{ active: activeMenu === 'analytics' }">
                <a href="#" class="nav-link" @click="setActiveMenu('analytics')">
                  <i class="icon-bar-chart"></i>
                  <span class="nav-text">数据分析</span>
                </a>
              </li>
              <li class="nav-item" :class="{ active: activeMenu === 'settings' }">
                <a href="#" class="nav-link" @click="setActiveMenu('settings')">
                  <i class="icon-settings"></i>
                  <span class="nav-text">系统设置</span>
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="content">
        <div class="content-header">
          <h1 class="page-title">{{ getPageTitle() }}</h1>
          <div class="breadcrumb">
            <span>首页</span>
            <i class="icon-chevron-right"></i>
            <span>{{ getPageTitle() }}</span>
          </div>
        </div>

        <div class="content-body">
          <!-- 仪表盘内容 -->
          <div v-if="activeMenu === 'dashboard'" class="dashboard">
            <div class="stats-grid">
              <div class="stat-card">
                <div class="stat-icon users">
                  <i class="icon-users"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-number">2,543</div>
                  <div class="stat-label">总用户数</div>
                </div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon orders">
                  <i class="icon-shopping-cart"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-number">1,234</div>
                  <div class="stat-label">总教师数</div>
                </div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon revenue">
                  <i class="icon-dollar"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-number">1,567</div>
                  <div class="stat-label">总课程数</div>
                </div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon products">
                  <i class="icon-package"></i>
                </div>
                <div class="stat-content">
                  <div class="stat-number">456</div>
                  <div class="stat-label">总数</div>
                </div>
              </div>
            </div>

            <div class="charts-section">
              <div class="chart-card">
                <h3>销售趋势</h3>
                <div class="chart-placeholder">
                  <p>图表区域 - 可集成 Chart.js 或 ECharts</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 其他页面内容 -->
          <div v-else class="page-content">
            <div class="content-placeholder">
              <h2>{{ getPageTitle() }}</h2>
              <p>这里是 {{ getPageTitle() }} 的内容区域</p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const sidebarCollapsed = ref(false)
const activeMenu = ref('dashboard')
const showUserDropdown = ref(false)
const notificationCount = ref(3)

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const setActiveMenu = (menu) => {
  activeMenu.value = menu
}

const toggleUserMenu = () => {
  showUserDropdown.value = !showUserDropdown.value
}

const showNotifications = () => {
  alert('通知功能待开发')
}

const getPageTitle = () => {
  const titles = {
    dashboard: '仪表盘',
    students: '学员管理',
    teachers: '教师管理',
    courses: '课程管理',
    analytics: '数据分析',
    settings: '系统设置'
  }
  return titles[activeMenu.value] || '仪表盘'
}

// 点击外部关闭下拉菜单
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-menu')) {
    showUserDropdown.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
/* 图标字体样式 */
.icon-logo::before { content: ''; }
.icon-menu::before { content: ''; }
.icon-search::before { content: ''; }
.icon-bell::before { content: ''; }
.icon-user::before { content: ''; }
.icon-settings::before { content: ''; }
.icon-logout::before { content: ''; }
.icon-chevron-down::before { content: ''; }
.icon-chevron-right::before { content: ''; }
.icon-dashboard::before { content: ''; }
.icon-users::before { content: ''; }
.icon-package::before { content: ''; }
.icon-shopping-cart::before { content: ''; }
.icon-bar-chart::before { content: ''; }
.icon-dollar::before { content: ''; }

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.admin-layout {
  min-height: 100vh;
  background-color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部导航栏 */
.header {
  height: 64px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.menu-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.menu-toggle:hover {
  background-color: rgba(255,255,255,0.1);
}

.header-right {
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-box {
  position: relative;
}

.search-box input {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 20px;
  padding: 8px 40px 8px 16px;
  color: white;
  width: 250px;
  transition: all 0.3s;
}

.search-box input::placeholder {
  color: rgba(255,255,255,0.7);
}

.search-box input:focus {
  outline: none;
  background: rgba(255,255,255,0.3);
  width: 300px;
}

.search-box .icon-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.7);
}

.notification {
  position: relative;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.notification:hover {
  background-color: rgba(255,255,255,0.1);
}

.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ef4444;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
}

.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.user-menu:hover {
  background-color: rgba(255,255,255,0.1);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 180px;
  margin-top: 8px;
  overflow: hidden;
  z-index: 1001;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-item.logout {
  color: #ef4444;
}

.dropdown-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 4px 0;
}

/* 主容器 */
.main-container {
  display: flex;
  margin-top: 64px;
  min-height: calc(100vh - 64px);
}

/* 侧边栏 */
.sidebar {
  width: 260px;
  background: white;
  box-shadow: 2px 0 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-section {
  margin-bottom: 32px;
}

.nav-title {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 20px 12px;
}

.sidebar.collapsed .nav-title {
  opacity: 0;
}

.nav-list {
  list-style: none;
}

.nav-item {
  margin-bottom: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-link:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.nav-item.active .nav-link {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 500;
}

.nav-link i {
  font-size: 20px;
  width: 20px;
  text-align: center;
}

.sidebar.collapsed .nav-text {
  opacity: 0;
  width: 0;
}

/* 主内容区 */
.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.content-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

/* 仪表盘样式 */
.dashboard {
  max-width: 1200px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.users { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stat-icon.orders { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-icon.revenue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-icon.products { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}

.stat-label {
  color: #6b7280;
  font-size: 14px;
}

.charts-section {
  display: grid;
  gap: 24px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.chart-card h3 {
  color: #1f2937;
  margin-bottom: 20px;
  font-weight: 600;
}

.chart-placeholder {
  height: 300px;
  background: #f9fafb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  border: 2px dashed #d1d5db;
}

.page-content {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.content-placeholder {
  text-align: center;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }
  
  .search-box input {
    width: 150px;
  }
  
  .search-box input:focus {
    width: 200px;
  }
  
  .content {
    padding: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    position: fixed;
    top: 64px;
    left: -260px;
    height: calc(100vh - 64px);
    z-index: 999;
  }
  
  .sidebar.collapsed {
    left: 0;
    width: 260px;
  }
}
</style> -->